<template>
  <div class="baseForm">
    <a-form :model="form" autoComplete="off" :label-col="getWidth()" labelAlign="right" ref="baseForm">
      <template v-for="(section, section_index) in  form.formState " :key="section_index">
        <div class="baseForm-sections" :id="section.id">
          <div class="titleSetting" v-if="section.type == 'title' && section.value">
            {{ section.value }}
          </div>
          <template v-for="(formItem, formItem_index) in  section.children " :key="formItem_index">
            <!-- 单选框 -->
            <a-form-item :name="[formItem.param]" :extra="formItem.extra" :label="formItem.label" v-if="(formItem.VIF ? formItem.VIF.value : true) &&
              formItem.type == 'radio' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-radio-group">
              <a-radio-group v-model:value="form[formItem.param]">
                <template v-for="(options, index_options) in formItem.options" :key="index_options">
                  <a-radio :value="formItem.isBoolean
                    ? index_options
                      ? false
                      : true
                    : +index_options + 1
                    ">
                    {{ options }}
                  </a-radio>
                </template>
              </a-radio-group>
              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 按钮单选框 -->
            <a-form-item :name="form[formItem.value]" :extra="formItem.extra" :label="formItem.label" v-if="formItem.type == 'radioButton' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-radio-group">
              <a-radio-group v-model:value="formItem.value">
                <template v-for="(options, index_options) in formItem.options" :key="index_options">
                  <a-radio-button :value="formItem.isBoolean
                    ? index_options
                      ? false
                      : true
                    : +index_options + 1
                    ">
                    {{ options }}
                  </a-radio-button>
                </template>
              </a-radio-group>
              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 特殊位置-数字输入框 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'selectInput' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-radio-group_associated">
              <span class="beforeText">{{ formItem.beforeText }}</span>
              <a-input-number v-model:value="form[formItem.param]" placeholder="请输入整数" :min="1" :max="100000" />
              <span class="afterText">{{ formItem.afterText }}</span>
            </a-form-item>
            <!-- 数字输入框 -->
            <a-form-item :name="[formItem.param]" :extra="formItem.extra" :label="formItem.label" v-else-if="formItem.type == 'numberInput' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-number-input" :class="`${formItem.param}`"
              :style="{ width: formItem.width ? formItem.width + 'px' : '' }">
              <span class="beforeText" v-if="formItem.beforeText">{{
                formItem.beforeText
              }}</span>
              <a-input-number v-model:value="form[formItem.param]" :placeholder="formItem.placeholder || '请输入整数'"
                :precision="formItem.precision ? formItem.precision : 0" :min="formItem.min ? formItem.min : 1"
                :max="formItem.max ? formItem.max : 100000000" />
              <span class="afterText" v-if="formItem.afterText">{{
                formItem.afterText
              }}</span>

              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips" overlayClassName="notifyOptions_tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1 notifyOptions_tips_icon"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 多个数字输入框 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'mulNumberInput' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-number-input">
              <a-form-item-rest>
                <div class="min-max-box">
                  <div class="min-max">
                    <span class="beforeText" v-if="formItem.minBeforeText">{{
                      formItem.minBeforeText
                    }}</span>
                    <a-input-number v-model:value="form[formItem.param]" placeholder="请输入整数" :min="1" :max="100000" />
                    <span class="afterText" v-if="formItem.minAfterText">{{
                      formItem.minAfterText
                    }}</span>
                  </div>
                  <div class="min-max" style="margin-left: 24px">
                    <span class="beforeText" v-if="formItem.maxBeforeText">{{
                      formItem.maxBeforeText
                    }}</span>
                    <a-input-number v-model:value="form[formItem.param]" placeholder="请输入整数" :min="1" :max="100000" />
                    <span class="afterText" v-if="formItem.maxAfterText">{{
                      formItem.maxAfterText
                    }}</span>
                  </div>
                </div>
              </a-form-item-rest>
            </a-form-item>
            <!-- 基础文字输入框 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'textInput' &&
                (formItem.associated
                  ? hiddenAssociatedItem(formItem, form.formState)
                  : true)
                " :rules="[formItem.rule]" :extra="formItem.extra" :style="{
      marginLeft: formItem.marginLeft + 'px',
      marginTop: formItem.marginTop + 'px',
    }" :class="formItem.associated
  ? 'form-a-radio-group_associated'
  : 'form-a-number-input'
  ">
              <div>
                <span class="beforeText" v-if="formItem.beforeText">{{
                  formItem.beforeText
                }}</span>
                <a-input v-model:value="form[formItem.param]" :placeholder="formItem.placeholder" :style="{
                  width: (formItem.width ? formItem.width : 304) + 'px',
                  paddingLeft: '12px',
                }" :show-count="formItem.maxCount ? true : false" :maxlength="formItem.maxCount" allow-clear />
                <span class="afterText" v-if="formItem.afterText">{{
                  formItem.afterText
                }}</span>
                <a-form-item-rest>
                  <template v-for="(greylist, greylist_index) in formItem.greyWhitelist" :key="greylist_index">
                    <div>
                      <a-input v-model:value="greylist.value" :placeholder="formItem.placeholder"
                        class="greyWhitelist_input" allow-clear>
                      </a-input>
                      <span class="iconfont icon-delete" @click="
                        deleteWhiteList(section_index, formItem_index, greylist_index)
                        "></span>
                    </div>
                  </template>
                </a-form-item-rest>
                <a-form-item-rest>
                  <div class="greyWhitelist_addWhitelist" v-if="formItem.addWhitelist">
                    <span :class="formItem.greyWhitelist.length >= formItem.maxNum
                      ? 'greyColor'
                      : 'greyWhitelist_span'
                      " @click="addGreyWhitelist(section_index, formItem_index)">新增白名单</span>
                    <!-- tips -->
                    <a-tooltip placement="right" v-if="formItem.tips">
                      <template #title>
                        <span>{{ formItem.tips }}</span>
                      </template>
                      <span class="iconfont icon-hint1"></span>
                    </a-tooltip>
                  </div>
                </a-form-item-rest>
              </div>
            </a-form-item>
            <!-- 基础多行文字输入框 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'textArea' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :extra="formItem.extra" :style="{ marginLeft: formItem.marginLeft + 'px' }"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <div class="textarea-content">
                <span class="beforeText" v-if="formItem.beforeText">{{
                  formItem.beforeText
                }}</span>
                <a-textarea v-model:value="form[formItem.param]" :placeholder="formItem.placeholder"
                  style="width: 304px; padding-left: 12px" :show-count="formItem.showCount" :maxlength="formItem.maxCount"
                  auto-size allow-clear />
                <span class="afterText" v-if="formItem.afterText">{{
                  formItem.afterText
                }}</span>
                <a-form-item-rest>
                  <template v-for="(greylist, greylist_index) in formItem.greyWhitelist" :key="greylist_index">
                    <div>
                      <a-input v-model:value="greylist.value" :placeholder="formItem.placeholder"
                        class="greyWhitelist_input" show-count :maxlength="25" allow-clear>
                      </a-input>
                      <span class="iconfont icon-delete" @click="
                        deleteWhiteList(section_index, formItem_index, greylist_index)
                        "></span>
                    </div>
                  </template>
                </a-form-item-rest>
                <a-form-item-rest>
                  <div class="greyWhitelist_addWhitelist" v-if="formItem.addWhitelist">
                    <span :class="formItem.greyWhitelist.length >= formItem.maxNum
                      ? 'greyColor'
                      : 'greyWhitelist_span'
                      " @click="addGreyWhitelist(section_index, formItem_index)">新增白名单</span>
                  </div>
                </a-form-item-rest>
                <a-tooltip placement="right" v-if="formItem.tips">
                  <template #title>
                    <span>{{ formItem.tips }}</span>
                  </template>
                  <span class="iconfont icon-hint1" style="margin-left: 8px"></span>
                </a-tooltip>
              </div>
            </a-form-item>
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'selectInput' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" class="form-a-radio-group_associated">
            </a-form-item>
            <!-- 可复选的select框 -->
            <div class="form-item-title" v-else-if="formItem.type == 'title'">
              {{ formItem.value }}
            </div>
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="(formItem.VIF ? formItem.VIF.value : true) &&
              formItem.type == 'multipleSelect' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :extra="formItem.extra" :style="{ marginLeft: formItem.marginLeft + 'px' }"
              :class="formItem.associated
                ? `form-a-radio-group_associated ${formItem.param}`
                : `form-a-number-input ${formItem.param}`
                ">
              <a-select v-model:value="form[formItem.param]" :mode="formItem.mode" :placeholder="formItem.placeholder"
                :maxTagCount="formItem.maxTagCount"
                :options="formItem.options.map((item: any, index: number) => ({ value: item.value || (formItem.mode == 'single' ? index + 1 : item), label: item.label || item, disabled: item.disabled || false }))"
                @change="changeSelect(section_index, formItem_index, formItem)"></a-select>
              <slot name="ipTable" v-if="formItem.showTable" :section_index="section_index"
                :formItem_index="formItem_index"></slot>
            </a-form-item>
            <!-- 带选项的数字输入框 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'selecteNumberInput' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <a-input-number v-model:value="form[formItem.param]" :step="formItem.stringMode ? 0.01 : 1">
                <template #addonAfter>
                  <a-select v-model:value="formItem.optionsValue" style="width: 78px" :options="formItem.options.map((item: any, index: number) => ({
                    value: index + 1, label: item
                  }))
                    "></a-select>
                </template>
              </a-input-number>
            </a-form-item>
            <!-- 图片上传组件 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'singlePictrueUpload' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :extra="formItem.extra" :class="formItem.associated
    ? 'form-a-radio-group_associated'
    : 'form-a-number-input'
    " @click="getIndex(section_index, formItem_index)">
              <span class="beforeText upload-pic" v-if="formItem.beforeText">{{
                formItem.beforeText
              }}</span>
              <a-form-item-rest>
                <upload :fileList="formItem.value" @uploadFinished="uploadFinished"
                  @upload_remove_Finished="upload_remove_Finished" :maxCount="formItem.maxCount" :accept="formItem.accept"
                  :title="formItem.uploadTitle" :isAutoUpload="true"></upload>
              </a-form-item-rest>
            </a-form-item>
            <!-- 水印图片位置选择 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'grigPosition' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :extra="formItem.extra" class="form-a-waterMarkGrid">
              <!-- <div class="waterMarkGrid">
                                          <span v-for="(watermark_item, watermark_item_index) in formItem.watermarkPosition"
                                            :class="formItem.value == watermark_item_index + 1 ? 'span-active' : ''"
                                            @click="selectWaterMarkPosition(section_index, formItem_index, watermark_item_index + 1)">{{
                              watermark_item
                                            }}</span>
                                        </div> -->
              <a-radio-group v-model:value="form[formItem.param]" class="waterMarkGrid">
                <a-radio-button :value="watermark_item_index + 1" :class="formItem.value == watermark_item_index + 1
                  ? 'span-active'
                  : 'span-deactive'
                  " v-for="(
                    watermark_item, watermark_item_index
                  ) in formItem.watermarkPosition">{{ watermark_item }}</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <!-- 颜色拾取器 -->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'colorPicker' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <color-picker v-model:hex="form[formItem.param]"></color-picker>
            </a-form-item>
            <!-- 纯展示组件 label:value-->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'label-value' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <span>{{ form[formItem.param] }}</span>
            </a-form-item>
            <!-- switch 开关组件-->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'switch' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? `form-a-radio-group_associated formItem${formItem_index}`
                : `form-a-number-input formItem${formItem_index}`
                " class="swicth_border_bottom">
              <a-switch v-model:checked="form[formItem.param]" :size="formItem.size" />
            </a-form-item>
            <!-- checkbox 多选组件-->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="(formItem.VIF ? formItem.VIF.value : true) &&
              formItem.type == 'checkbox-group' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? `form-a-radio-group_associated ${formItem.param}`
                : `form-a-number-input ${formItem.param}`
                ">
              <a-form-item-rest>
                <a-checkbox v-model:checked="props.checkAll" v-if="formItem.showCheckAll"
                  @change="onCheckAllCheckbox(formItem.param)">
                  全选
                </a-checkbox>
              </a-form-item-rest>
              <a-checkbox-group v-model:value="form[formItem.param]" :options="formItem.checkboxOptions">
                <!-- <a-checkbox v-for="checkItem in formItem.checkboxOptions" :value="checkItem.value">{{ checkItem.value }}
                  tips -->
                <!-- <a-tooltip placement="right" v-if="checkItem.tips" overlayClassName="notifyOptions_tips">
                    <template #title>
                      <span>{{ checkItem.tips }}</span>
                    </template>
                    <span class="iconfont icon-hint1 notifyOptions_tips_icon"></span>
                  </a-tooltip>
                </a-checkbox> -->
              </a-checkbox-group>
            </a-form-item>
            <!-- 动态增加、减少表单项 组件-->

            <a-form-item :name="[formItem.param]" :label="formItem.label" :rules="[formItem.rule]"
              v-else-if="formItem.type == 'addDomain_associated'">
              <slot name="addDomain" :list="form[formItem.param]" :section_index="section_index"
                :formItem_index="formItem_index"></slot>
            </a-form-item>
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'addDomain' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <a-button type="dashed" class="addDomain" @click="addDomain(section_index, formItem_index)">
                <PlusOutlined />
                <span class="iconfont icon-Add"></span>
                <span>{{ form[formItem.param] }}</span>
              </a-button>
            </a-form-item>
            <!-- title组件-->
            <a-form-item v-else-if="formItem.type == 'justTitle' && (formItem.VIF ? formItem.VIF.value : true)
              " class="justTitle">
              <span>{{ form[formItem.param] }}</span>
            </a-form-item>
            <!-- 日期组件-->
            <a-form-item :name="[formItem.param]" :label="formItem.label" v-else-if="formItem.type == 'date' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, form.formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <time-picker></time-picker>
            </a-form-item>
          </template>
        </div>
      </template>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import upload from "@/components/upload/uploadFile.vue";
import { ref, watch } from "vue";
import timePicker from "@/components/picker/timeRangePicker.vue";
import { dataSourceType } from "@/type.d";
import { max } from "lodash";
//props
const props = defineProps({
  form: {
    type: Object,
    default: {},
  },
  width: {
    type: Number,
    default: 0,
  },
  checkAll: {
    type: Boolean,
    default: false,
  },
});
//emit
const emit = defineEmits([
  "deleteWhiteList",
  "addGreyWhitelist",
  "getIndex",
  "addItem",
  "uploadFinished",
  "selectWaterMarkPosition",
  "upload_remove_Finished",
  "onCheckAllCheckbox",
  "addDomain",
  "onChangeSelect",
]);
//data
const form = ref(props.form as any);

const baseForm = ref(null);
//watch
watch(
  () => props.form,
  (newVal, oldVal) => {
    form.value = newVal;
  },
  { deep: true }
);
//methods
//获取最大的label的宽度
const getWidth = () => {
  let labelLength: any[] = [];
  form.value.formState.forEach((item: any) => {
    item.children &&
      item.children.forEach((c_item: any) => {
        labelLength.push(c_item.label?.length || 0);
      });
  });
  let maxLength = Math.max(...labelLength);
  return { style: { width: (maxLength + 1) * 14 + "px" } };
};

// 控制关联组件的显示隐藏//methods
const hiddenAssociatedItem = (item: dataSourceType, formState: dataSourceType[]) => {
  let isHidden = false;
  if (!item.associated) {
    return true;
  }
  let associated = item.associated.split(",");
  let isH: boolean[] = [];
  associated.forEach((asso: string | number) => {
    formState.forEach((data) => {
      data.children.forEach((child: dataSourceType) => {
        if (asso == child.param) {
          if (item.associatedValue.toString().includes("!=")) {
            isH.push(item.associatedValue.split("!=")[1] != form[child.param]);
          } else {
            isH.push(item.associatedValue == form.value[child.param]);
          }
        }
      });
    });
    isHidden = isH.length ? isH.every((ish) => ish != false) : true;
  });
  return isHidden;
};
// 删除白名单
const deleteWhiteList = (index1: number, index2: number, index3: number) => {
  emit("deleteWhiteList", index1, index2, index3);
};
// 新增白名单
const addGreyWhitelist = (index1: number, index2: number) => {
  emit("addGreyWhitelist", index1, index2);
};
// 添加黑白名单
const addItem = (index1: number, index2: number) => {
  emit("addItem", index1, index2);
};
// 获取点击的是第几个元素
const getIndex = (index1: number, index2: number) => {
  emit("getIndex", index1, index2);
};
// 上传图片
const uploadFinished = (data: any) => {
  emit("uploadFinished", data);
};
// 删除图片
const upload_remove_Finished = (data: any) => {
  emit("upload_remove_Finished", data);
};

// 动态添加form表单
const addDomain = (index1: number, index2: number) => {
  emit("addDomain", index1, index2);
};

//复选框的全选
const onCheckAllCheckbox = (param: string) => {
  emit("onCheckAllCheckbox", param);
};
// 选项框选择改变时
const changeSelect = (index1: any, index2: any, item: any) => {
  emit("onChangeSelect", index1, index2, item);
};
// const selectWaterMarkPosition = (index1: number, index2: number, index3: number) => {
//   emit('selectWaterMarkPosition', index1, index2, index3)
// }
// defineExpose
defineExpose({ baseForm });
</script>

<style lang="less" scoped>
.baseForm {
  .baseForm-sections {
    padding-bottom: 16px;

    .titleSetting {
      height: 40px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 40px;
      background: #f7f8fa;
      border-radius: 2px 2px 2px 2px;
      position: relative;
      padding-left: 24px;
      margin-top: 24px;
    }

    .titleSetting:after {
      width: 3px;
      height: 12px;
      background: var(--theme_button_active_bg_color, #1050c7);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      content: "";
      position: absolute;
      left: 12px;
      z-index: 1;
      top: 14px;
    }

    .form-a-radio-group_associated {
      display: flex;
      margin-left: 217px;
      margin-top: 16px;

      .textarea-content {
        display: flex;
        flex-direction: row;
        align-items: end;
      }
    }

    .min-max-box {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .beforeText,
    .afterText {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .beforeText {
      margin-right: 12px;
    }

    .afterText {
      margin-left: 12px;
    }

    .ant-input-number {
      width: 136px;
    }

    .form-a-number-input {
      margin-top: 24px;
    }

    .form-item-title {
      padding-left: 32px;
      margin-top: 24px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }

    .upload-pic {
      margin-bottom: 8px;
      display: inline-block;
    }

    .greyWhitelist_input {
      width: 283px;
      margin-top: 16px;
    }

    .icon-delete {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 32px;
      margin-left: 8px;
    }

    .icon-delete:hover {
      color: rgba(0, 0, 0, 0.85);
    }

    .iconfont.icon-hint1 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }

    .greyWhitelist_addWhitelist {
      width: 304px;
      display: flex;
      justify-content: end;
      align-items: center;
      margin-top: 8px;
      line-height: 14px;

      .greyWhitelist_span {
        font-size: 14px;
        font-weight: 400;
        color: var(--theme_text_hightlight_color, #2f54eb);
        margin-right: 8px;
      }

      .greyWhitelist_span:hover {
        color: var(--theme_button_hover_bg_color, #597ef7);
      }

      .greyWhitelist_span:active {
        color: var(--theme_button_active_bg_color, #1d39c4);
      }

      .greyColor {
        color: rgba(0, 0, 0, 0.25);
      }
    }

    .waterMarkGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 98px;
      width: 140px;
      grid-gap: 4px;

      .span-deactive {
        text-align: center;
        line-height: 30px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        font-size: 14px;
        color: #000;
        padding: 0;
        border: 1px dashed rgba(0, 0, 0, 0.15);
      }

      ive:hover {
        border-color: var(--theme_button_hover_bg_color, #4892fa);
      }

      .span-active {
        text-align: center;
        line-height: 30px;
        background: var(--theme_button_bg_color, #1f6ded);
        color: #fff;
        padding: 0;
      }
    }

    .form-a-waterMarkGrid {
      margin-top: 24px;
    }

    .justTitle {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 14px;
      margin-top: 24px;
    }

    .addDomain {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      .icon-Add {
        font-size: 24px;
      }
    }
  }
}
</style>
<style lang="less">
.zs-color-picker-panel__visible {
  z-index: 10 !important;
}

.zs-color-picker-btn {
  width: 60px !important;
  border-radius: 2px !important;
}

.textarea-content .ant-tooltip {
  max-width: 305px;
}

.baseForm {
  .ant-form-item {
    margin-bottom: 0px;
    margin-left: 32px;

    .ant-form-item-label {
      text-align: right;
      width: 179px;
      margin-right: 8px;
    }

    .ant-select {
      width: 400px;
    }
  }

  .ant-form-item-extra {
    width: 310px;
  }

  .form-a-radio-group {
    margin-top: 24px;

    .ant-form-item-label {
      label {
        height: 23px;
      }
    }

    .ant-form-item-control-input {
      min-height: 23px;
    }
  }
}

.ant-form-item-control-input-content:hover {
  .anticon-close-circle {
    display: block;
  }

  .ant-input-show-count-suffix {
    // display: none;
  }
}
</style>
